<template>
  <div class="articlePublish-page">
    <GhNavBar title="文章发布"  />
    <!-- 头部搜索和添加文章功能 -->
    <div class="head">
    <van-search class="search"  v-model="value" placeholder="搜索标题"   />
    <van-button class="add-btn" @click="addArticle" native-type="submit"  block  >
           添加文章
     </van-button>
    </div>
    <!-- 咨询师已发布的文章 -->
     <div class="content">
       <van-list
       v-model:loading="loading"
       :finished="finished"
       finished-text="没有更多了"
       v-if="items.length>0"
       >
       <div class="total_article">共有{{items.length}}篇文章</div>
            <van-cell v-for="item in items" :key="item.id" >
             <div class="item">
               <div class="edit" @click="edit_article(item)"> 
                <gh-icon name="user-edit"></gh-icon>
              </div>
                   <router-link  :to="`/detail/${item.id}`">
                    <div class="center-box">
                       <div class="img-box">
                        <img  v-lazy="item.picture" alt="" >
                      </div>
                      <div class="title">
                        {{item.title}}
                     </div>
                    </div>
                   </router-link>
                <div class="del" @click="del_article(item)">
                  <gh-icon name="user-del"></gh-icon>
                </div>
              </div>
            </van-cell>
       </van-list>
       <van-empty v-else  description="暂无文章信息" />
     </div>
   
  </div>
</template>

<script setup>
import {ref,reactive,onBeforeMount,computed,onMounted,watch} from "vue"
import { Toast, Dialog } from 'vant';
import 'vant/es/toast/style'
import{useRouter,useRoute}from 'vue-router'
import{getconsultantInfoByaccount, getAllArticleByConsultant,delArticle }from '@/services/consultant'
const router =useRouter();  
const route =useRoute()
const value=ref('')

//加载和完成的响应式变量
const loading = ref(false);
const finished = ref(false);
const beforeClose = ({ position }) => {
      switch (position) {
        case 'left':
        case 'cell':
        case 'outside':
          return true;
        case 'right':
          return new Promise((resolve) => {
            Dialog.confirm({
              title: '确定删除吗？',
            }).then(resolve);
          });
      }
    }
//文章列表响应式变量
const items=ref({})

onBeforeMount(() => {
  init();
});

const init=async()=>{
    // 在这里处理数据，这里只是一个简单示例
  if (items && items.length > 0) {
    // 处理数据逻辑，可以根据实际数据结构进行遍历和处理
     console.log('1')
  } else {
    // Toast('没有数据');
    finished.value = true;
  }
}
const fetchData=async()=>{
  const account=JSON.parse(localStorage.getItem('gh-user')).user.userData.account
    const consultantInfo=await getconsultantInfoByaccount(account)
    const author=consultantInfo.data.name
    const res =await getAllArticleByConsultant(author)
    items.value=res.data
}

onMounted(()=>{
   fetchData()
})

//添加文章按钮
const addArticle=()=>{
  router.push('/addArticle')
}

//删除文章操作
const del_article=async(item)=>{
  await Dialog.confirm({
       message:'您确定要删除此文章吗？'
    })
    .then(async()=>{
        const res=await delArticle(item.id).then((response)=>{
        return response;
       }).catch((error)=>{
        return error
        })
         if(res.status!==201){
         if(res.response.status==402){
           const toastMessage=res.response.data.error
           Toast.fail(toastMessage)
            isRegistering.value=false;
            return
           }
           else{
            Toast.fail('删除失败！')
            return
           }
         }
         Toast.success('删除成功')
         fetchData()
    })
    .catch(()=>{
       Toast('取消操作')
    })
}

//编辑文章操作
const edit_article=async(item)=>{
    //  console.log(item)
     router.push(`/editArticle/${item.id}`)
}
</script>

<style lang="scss" scoped>
.articlePublish-page{
    width: 100%;
    .head{
        display: flex;
        position: fixed;
        z-index: 999;
        justify-content: space-between;
        align-items: center;
        min-height: 30px;
        background-color: #fff;
         top:35px;
         padding: 0 10px;
         .search{
            flex: 1;
         }
         .add-btn{
            background-color: var(--gh-admin);
            color: #fff;
            font-size: 14px;
            font-family: '黑体';
            border-radius: 5px;
            height: 30px;
            width: 130px;
         }
     }
     .content{
        width: 100%;
        margin-top:90px;
        height: 100%;
         .total_article{
                text-align: center;
                padding: 5px 0;
                font-size: 10px;
                color: var(--gh-text3);
         }
          .van-cell{
            height: 100px;
            width: 100%;
            padding: 5px;
            .item{
                height: 100%;
                width: 100%;
                display: flex;
                justify-content: space-between;
                align-items: center;
                a{
                    display: flex;
                    padding: 0 10px;
                    align-items: center;
                    flex: 1;
                    height: 100%;
                    .center-box{
                      width: 100%;
                      height: 100%;
                      display: flex;
                      justify-content: space-between;
                      align-items: center;
                      .img-box{
                        left: 0;
                        /* top: 15px; */
                        width: 60px;
                        height: 60px;
                        border-radius: 10px;
                        background: #d5d5d5;
                        img{
                            display: block;
                            width: 100%;
                            height: 100%;
                            border-radius: 10px;
                        }
                    }
                    .title{
                        width: 180px;
                        margin-left: 10px;
                        max-height: 50px;
                        line-height: 25px;
                        font-size: 14px;
                        overflow: hidden;
                        font-family: '宋体';
                        color: var(--gh-text1);
                    }
                    }
                   
                }
                .edit,.del{
                  display: flex;
                  align-items: center;
                  justify-content: center;
                  width: 30px;
                  height: 100%;
                }
           }
          }
      }
  }
</style>
